import React, { Component, PureComponent } from 'react';

/*
	React memo介绍与使用
	以及shouldComponentUpdate，React PureComponent
*/

//PureComponent
class Title extends PureComponent<any> {
	render() {
		console.log("我是title组件")
		return (
			<div>
				标题：{this.props.title}
			</div>
		)
	}
}

//shouldComponentUpdate
class Count extends Component<any>{

	shouldComponentUpdate = (nextProps, nextState, nextContext) => {
		return nextProps.count !== this.props.count
	}

	render() {
		console.log(this.props.count)
		return (
			<div>
				条数：{this.props.count}
			</div>
		)
	}
}

export default class Purememo extends Component<any, any> {
	constructor(props) {
		super(props)
		this.state = {
			title: 'shouldComponentUpdate使用',
			count: 0
		}
	}
	componentDidMount() {
		setInterval(() => {
			this.setState({
				count: this.state.count + 1
			})
			console.log("正在前进1s...")
		}, 1000)
	}
	render() {
		return (
			<div>
				<Title title={this.state.title}></Title>
				<Count count={this.state.count}></Count>
			</div>
		)
	}
}